<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../resource/dhtmlx/grid/codebase/grid.css">
    <script src="../../resource/dhtmlx/grid/codebase/grid.js"></script>
</head>
<body>
<div style="height:500px; width:1800px" id="grid_container"></div>
<script>
    // creating dhtmlxGrid
    var grid = new dhx.Grid("grid_container", {
        // 列声明
        columns: [
            {width: 100, id: "a", header: [{text: "#"}]},
            // 设置列类型为下拉框
            {width: 100, id: "b", header: [{text: "Title"}], editorType: "select", options: [1, 2, 3]},
            {width: 200, id: "c", header: [{text: "Name"}]},
            {width: 200, id: "d", header: [{text: "Address"}]}
        ],
        // 设置行高
        headerRowHeight: 150,
        // 指定加载的数据
        data: [
            {a: 1, b: 11, c: 111, d: 1111, e: 11111}
            , {a: 2, b: 12, c: 112, d: 1111, e: 11112}
            , {a: 3, b: 13, c: 113, d: 1113, e: 11113}
        ],
        // 使可以直接双击在表格中编辑数据
        editable: true
    });

    /**
     * 功能：给grid绑定点击事件
     * 说明：
     * - row参数是所点击的行数据，column是点击的列的对象，e是事件对象
     */
    grid.events.on("CellClick", function (row, column, e) {
        console.log("CellClick", row, column, e);
    });

    /**
     * 功能: 给grid绑定编辑前的回调.
     */
    grid.events.on("BeforeEditStart", function (row, col, editorType) {
        console.log("BeforeEditStart", row, col, editorType);
        return isEditEnable(row.a);
    });

    /**
     * 功能: 给列增加编辑后的回调.
     */
    grid.events.on("BeforeEditEnd", function (value, row, column) {
        console.log("BeforeEditEnd", value, row, column);
        return syncToRemote(value);
    });

    /**
     * 功能: 模拟同步后台
     * @returns {boolean} if true then sync success else sync fail.
     */
    function syncToRemote(value) {
        return value % 2 === 1;
    }

    /**
     * 功能: 判断列是否允许编辑.
     * @returns {boolean}   如果返回true表示允许编辑, 反之不允许.
     */
    function isEditEnable(value) {
        return value % 2 === 1;
    }

</script>
</body>
</html>